<template>
	<cover-view class="confirmBox" v-show="confShow">
		<cover-view class="mask" @click="cancel"></cover-view>
		<cover-view class="content">
			<cover-view class="title">{{defaultParam.title}}</cover-view>
			<slot name="messageSlot">
				<cover-view 
				v-if="defaultParam.message" 
				class="text" 
				<!-- #ifdef H5 -->
				v-html="defaultParam.message"
				<!-- #endif -->
				>
				<!-- #ifdef MP-WEIXIN -->
				{{defaultParam.message}}
				<!-- #endif -->
				</cover-view>
				<cover-view class="message-list" v-if="isMessageList">
					<cover-view class="message" v-for="(item, index) in defaultParam.message">{{index + 1}}.{{item}}</cover-view>
				</cover-view>
			</slot>
	
			<cover-view class="tipsMsg" v-if="defaultParam.tipsMsg">{{ defaultParam.tipsMsg }}</cover-view>
			<cover-view class="btnWrap">
				<cover-view class="btnCenter flex ac" v-if="defaultParam.btnNumber == 1">
					<cover-view class="btn on" data-ui="0"  @click="confirmFn">{{ defaultParam.confirmBtMsg }}</cover-view>
				</cover-view>
				<cover-view class="btnCenter flex ac" v-else>
					<cover-view class="btn" data-ui="0" @click="cancelBtn">{{ defaultParam.cancelBtMsg }}</cover-view>
					<cover-view class="line"></cover-view>
					<cover-view class="btn on" data-ui="0" @click="confirmFn">{{ defaultParam.confirmBtMsg }}</cover-view>
				</cover-view>
			</cover-view>
		</cover-view>
	</cover-view>
</template>

<script>
	const miguDefault = {
		title: '',
		message: '',
		confirmBtMsg: '确认',
		cancelBtMsg: '取消',
		tipsMsg: '',
		btnNumber: 2,
		cancelBtnFn: null,
		confirmBtnFn: null
	}
	export default {
		data() {
			return {
				defaultParam: {
					title: '',
					message: '',
					confirmBtMsg: '确认',
					cancelBtMsg: '取消',
					tipsMsg: '',
					autoClose: true,
					btnNumber: 2,
					cancelBtnFn: null,
					confirmBtnFn: null
				},
				isMessageList: false,
				confShow: false,
			};
		},
		methods: {
			confirm(param) {
				this.isMessageList = Array.isArray(param.message)
				Object.assign(this.defaultParam, miguDefault, param)
				this.confShow = true
			},
			confirmFn() {
				this.defaultParam.confirmBtnFn ? this.defaultParam.confirmBtnFn(this) : this.$emit('confirm')
				if (this.defaultParam.autoClose) this.confShow = false
			},
			cancelBtn() {
				this.defaultParam.cancelBtnFn ? this.defaultParam.cancelBtnFn(this) : this.$emit('cancel')
				this.confShow = false
			},
			close() {
				this.confShow = false
			}
		}
	}
</script>

<style scoped lang="scss">
	.confirmBox {
		position: fixed;
		z-index: 99999;
		left: 0;
		top:0;
		bottom: 0;
		width: 100%;
		.mask {
			position: fixed;
			background: rgba(0, 0, 0, 0.6);
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
		}
	
		.content {
			position: fixed;
			background: #fff;
			width: 560rpx;
			// height: 276rpx;
			// border-radius: 16rpx;
			border-radius: 12rpx;
			//padding: 48rpx 44rpx 32rpx;
			top: 50%;
			left: 50%;
			transform: translateY(-50%);
			margin-left: -280rpx;
			color: #716d80;
	
			.title {
				padding: 0 44rpx;
				padding-top: 48rpx;
				text-align: center;
				color:#333;
				font-size: 32rpx;
				font-weight: 600;
				color: rgba(113, 109, 128, 1);
				margin-bottom: 16rpx;
			}
	
			.text {
				padding: 0 44rpx;
				text-align: center;
				font-size: 28rpx;
				white-space: normal;
			}
	
			.message-list{
				padding: 0 44rpx;
				box-sizing: border-box;
				.message{
					white-space: normal;
					font-size: 28rpx;
					color: #666666;
					margin-bottom: 35rpx;
				}
			}
	
	          .tipsMsg{
				margin-top: 30rpx;
				padding: 2rpx;
				color: #a09cb4;
				text-align: center;
				font-size: 24rpx;
				white-space: normal;
			}
	
			.btnWrap {
				// padding-bottom: 32rpx;
				margin-top: 40rpx;
				overflow: hidden;
				text-align: center;
	
				.btnCenter {
					// display: inline-block;
	                  border-top: 1px solid #EAEAEA;
					.btn {
						font-size: 32rpx;
						// width: 200rpx;
						height: 94rpx;
						text-align: center;
						line-height:94rpx;
						// margin-right: 12rpx;
						// float: left;
						// border: 1px solid #EAEAEA;
						// border-radius: 6rpx;
						flex: 1;
	
						&.on {
							// background: #ff004f;
							color: #FF004F;
							// border-color: #ff004f;
						}
	
						&:last-child {
							margin-right: 0;
						}
					}
					.line{
						height: 94rpx;
						width: 1px;
						background-color: #EAEAEA;
					}
				}
			}
		}
	}
</style>